<!-- 砸金蛋 -->
<template>
	<view class="">
		<view class="goldenEggs">
			<view class="nav" :style="{paddingTop: `${statusBarHeight + 7}`  + 'px'}" @tap="back">
				<u-icon name="arrow-left" color="#FFF" size="40"></u-icon>
			</view>
			<view class="goldenEggs_content">
				<view class="title">
					<image :src="title_img" mode=""></image>
				</view>
				<view class="rule pf" @tap="jump(ruleUrl)">
					游戏规则
				</view>
				<view class="mypoints x-c"><text class="content">我的积分：<text class="num">{{goldCoin || 0}}</text></text>
				</view>
				<view class="x-c" style="padding-top: 20rpx;color: #fff;">
					每次游戏将花费您{{userdScore.consume_points}}积分
					<view class="" v-if="free_count != 0">，可免费{{free_count || 0}}次数</view>
					</view>
				<view class="center" :style="{width:`${screenWidth - 18 }` +'px'}">
					最高奖励可获得888现金好礼
				</view>
				<!-- 金蛋 -->
				<view class="bottom pr">
					<view class="hammer pa" v-if="hummer_show"
						:class="active==0?'hummer1 pa':active==1?'hummer pa':active==2?'hummer3 pa':''">
						<image :src="hammer_img" mode=""></image>
					</view>
					<view class="eggs pa">
						<template v-for="(item,index) in eggs">
							<image :src="item" mode="" id="egg" @tap="smashing(index)"
								:style="egg_show&&index==active? 'width:165rpx;height:120rpx':''"></image>
						</template>
					</view>
					<view class="stage pa">
						<image :src="goldenEggs_stage" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<regret :show="regret_show" @close="close"></regret>
		<congratulations :show="congratulations_show" :prizeName="targetName" @close="close"></congratulations>
		<view class="finish_box pf" v-if="finish_status">
			<view class="card pa">
				<view class="name x-c">温馨提示</view>
				<view class="text x-c">每次游戏将花费您{{userdScore.consume_points}}积分</view>
				<view class="btn x-ac">
					<view class="cancel" @click="cancel">取消</view>
					<view class="finally" @click="finall">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import regret from './regret.vue'
	import congratulations from './congratulations.vue'
	import {
		ref,
		onMounted,
		onUnmounted
	} from 'vue'
	export default {
		components: {
			regret,
			congratulations
		},
		data() {
			return {
				finish_status: true,
				title_img: this.imgUrl + 'goldenEggs_title.png',
				hammer_img: this.imgUrl + 'hammer.png', // 锤子图片
				goldenEggs: this.imgUrl + 'goldenEggs.png', // 金蛋图片
				goldenEggs_stage: this.imgUrl + 'goldenEggs_stage.png', // 舞台图片
				ruleUrl: '/pages/activity/rule/index', // 规则页面
				regret_show: false, // 未中奖弹窗
				congratulations_show: false, // 中奖弹窗
				priseList: [ // 中奖列表
					{
						id: 0,
						priseLever: '一等奖',
						priseName: 'IPhone13手机一台'
					},
					{
						id: 1,
						priseLever: '',
						priseName: '很遗憾未中奖'
					},
				],
				eggs: [ //金蛋图片列表 					type: 1(敲三个的时候需要)
					'https://mystore-1304299581.cos.ap-guangzhou.myqcloud.com/static/image/goldenEggs.png',
					'https://mystore-1304299581.cos.ap-guangzhou.myqcloud.com/static/image/goldenEggs.png',
					'https://mystore-1304299581.cos.ap-guangzhou.myqcloud.com/static/image/goldenEggs.png'
				],
				active: null, //砸中的金蛋下标
				hummer_show: false, //是否显示锤子
				egg_show: false, //是否显示碎掉的金蛋
				targetName: '',
				free_count: 0 // 免费次数
			}
		},
		computed: {
			...mapState({
				goldCoin: state => state.init.points,
				prizeName: state => state.game.prizeName,
				statusBarHeight: state => state.init.systemInfo.statusBarHeight, // 屏幕宽度
				screenWidth: state => state.init.systemInfo.screenWidth, // 状态栏高度
				key: state => state.game.key,
				userdScore: state => state.game.priseRes // 花费积分// 游戏key值
			})
		},
		mounted() {
			this.free_count = this.userdScore.free_count
		},
		methods: {
			cancel() {
				this.$Router.back(1)
			},
			finall() {
				this.finish_status = false
			},
			jump(path) {
				this.$Router.push({
					path: path
				})
			},
			close() {
				this.regret_show = false
				this.congratulations_show = false
				this.egg_show = false
				this.eggs = ['https://mystore-1304299581.cos.ap-guangzhou.myqcloud.com/static/image/goldenEggs.png',
					'https://mystore-1304299581.cos.ap-guangzhou.myqcloud.com/static/image/goldenEggs.png',
					'https://mystore-1304299581.cos.ap-guangzhou.myqcloud.com/static/image/goldenEggs.png'
				]

			},
			//返回上一页
			back() {
				this.$Router.back(1)
			},
			// 敲蛋
			smashing(index) {
				let obj = {
					key: this.key
				}
				this.$store.dispatch('game/get_prise', obj).then(res => {
					if (res.status === 1) {
						this.hummer_show = true;
						this.active = index;
						// 在请求一次游戏之后调用一下剩余积分
						this.$store.dispatch('init/get_Points');
						if (this.free_count > 0) {
							this.free_count--
						}
						setTimeout(() => {
							this.egg_show = true
							this.eggs[index] = this.imgUrl + "goldenEggs_split.png"
						}, 1000)
						setTimeout(() => {
							if (this.prizeName === "谢谢参与") {
								this.regret_show = true
							} else {
								this.congratulations_show = true
								this.targetName = this.prizeName
							}
						}, 1500)
						setTimeout(() => {
							this.hummer_show = false
						}, 3000)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>

<style>
	page {
		background: url(https://mystore-1304299581.cos.ap-guangzhou.myqcloud.com/static/image/goldenEggs_bg.png)no-repeat;
		background-size: 100% 125%;
	}
</style>
